<template>
    <table v-if="treeData && treeData.name">
        <tr>
            <td :colspan="treeData.child ? treeData.child.length * 2 : 1"
                :class="{parentLevel: treeData.child, extend: treeData.child && treeData.child.length && treeData.extend}">
                <div :class="{node: true, hasMate: treeData.mate}">
                    <div class="person" @click="$emit('click-node', treeData)">
                        <el-popover placement="right-start" popper-class="popover-select" width="112"  trigger="click">
                                <div class="popover-list">
                                    <p  @click="addStock('add')">添加子部门</p>
                                    <p  @click="addStock('detail')">部门详情</p>
                                    <p  v-if="treeData.parentId" @click="addStock('edit')">修改</p>
                                    <p  v-if="treeData.parentId" @click="deleteStock">删除</p>
                                </div>
                                <div class="avat company" slot="reference" :class="treeData.id == nowId?'chooseClass':''">
                                {{treeData.name}}
                            </div>
                            </el-popover>
                        <!-- <el-popover placement="right-start"  popper-class="popover-select" width="112">
                            <div style="margin: 0;display: flex;flex-direction: column;">
                                <div class="buttonClass" @click="addStock('add')">添加子部门</div>
                                <div class="buttonClass" @click="addStock('detail')">部门详情</div>
                                <div v-if="treeData.parentId" class="buttonClass" @click="addStock('edit')">修改</div>
                                <div v-if="treeData.parentId" class="buttonClass" @click="deleteStock">删除</div>
                            </div>
                            <div class="avat company" slot="reference" >
                                {{treeData.name}}
                            </div>
                        </el-popover> -->
                    </div>
                </div>
                <!-- <div class="extend_handle" v-if="treeData.child && treeData.child.length" @click="toggleExtend(treeData)"></div> -->
            </td>
        </tr>
        <!-- 这是一个递归组件,注意,这里还要调用,需要传递的数据这里也要传递,否则操作时拿不到子级的数据 -->
        <tr v-if="treeData.child && treeData.child.length && treeData.extend">
            <td v-for="(child, index) in treeData.child" :key="index" colspan="2" class="childLevel">
                <TreeChart :json="child" :isDetail="isDetail" @add="$emit('add', $event)" :nowId="nowId"
                    @delete="$emit('delete', $event)" @click-node="$emit('click-node', $event)" />
            </td>
        </tr>
    </table>
</template>

<script>
    export default {
        name: "TreeChart",
        props: {
            json: {}, // 渲染数据
            isDetail: {
                default: false // 是否是详情
            },
            nowId:{},
        },

        data() {
            return {
                treeData: {},
            };
        },

        created() {
            // console.log(this.json)
        },

        watch: {
            isDetail: function (val) { // 是否是详情,详情不能添加编辑
                this.isDetail = val;
            },
            json: {
                // 遍历当前的数据
                handler: function (Props) {
                    let extendKey = function (jsonData) {
                        jsonData.extend =
                            jsonData.extend === void 0 ? true : !!jsonData.extend;
                        // if (Array.isArray(jsonData.child) && jsonData.child.length) {
                        //   jsonData.child.forEach(c => {
                        //     extendKey(c);
                        //   });
                        // }
                        return jsonData;
                    };
                    if (Props) {
                        this.treeData = extendKey(Props);
                    }
                },
                immediate: true,
                deep: true
            }
        },
        methods: {
            toggleExtend(treeData) {
                treeData.extend = !treeData.extend;
                this.$forceUpdate();
            },

            // 新增编辑,val: add 新增, edit 编辑 ,detail 详情
            addStock(val) {
                this.$emit('add', {
                    val: val,
                    data: this.treeData
                })
            },

            // 删除
            deleteStock() {
                this.$emit('delete', this.treeData)
            },
        }
    };
</script>

<style lang="less" scoped>
    table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    td {
        position: relative;
        vertical-align: top;
        padding: 0 0 60px 0;
        text-align: center;
    }

    td.childLevel {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .parent {
        background: #199ed8 !important;
        font-weight: bold;
    }

    .extend_handle {
        position: absolute;
        left: 50%;
        bottom: 27px;
        width: 10px;
        height: 10px;
        padding: 10px;
        transform: translate3d(-15px, 0, 0);
        cursor: pointer;
    }

    .extend_handle:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 2px solid;
        border-color: rgba(231, 231, 231, 1) rgba(231, 231, 231, 1) transparent transparent;
        transform: rotateZ(135deg);
        transform-origin: 50% 50% 0;
        transition: transform ease 300ms;
    }

    .extend_handle:hover:before {
        border-color: #333 #333 transparent transparent;
    }

    .extend .extend_handle:before {
        transform: rotateZ(-45deg);
    }

    .extend::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 30px;
        height: 34px;
        border-left: 2px solid rgba(231, 231, 231, 1);
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        height: 30px;
        border-left: 2px solid rgba(231, 231, 231, 1);
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -32px;
        border-top: 2px solid rgba(231, 231, 231, 1);
    }

    .childLevel:first-child:before,
    .childLevel:last-child:before {
        display: none;
    }

    .childLevel:first-child:after {
        left: 50%;
        height: 35px;
        border: 2px solid;
        border-color: rgba(231, 231, 231, 1) transparent transparent rgba(231, 231, 231, 1);
        border-radius: 0 0 0 0;
        transform: translate3d(1px, 0, 0)
    }

    .childLevel:last-child:after {
        right: 50%;
        height: 35px;
        border: 2px solid;
        border-color: rgba(231, 231, 231, 1) rgba(231, 231, 231, 1) transparent transparent;
        border-radius: 0 0 0 0;
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel:first-child.childLevel:last-child::after {
        left: auto;
        border-radius: 0;
        border-color: transparent rgba(231, 231, 231, 1) transparent transparent;
        transform: translate3d(1px, 0, 0)
    }

    .node {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        padding: 0 30px;
    }

    .node .person {
        position: relative;
        display: inline-block;
        z-index: 2;
        // width: 120px;
        overflow: hidden;
    }
    // .node .person .avat:focus {
    //     background-color: rgba(0, 82, 217, 1) !important;
    //     color: #FFFFFF !important;
    // }
    .chooseClass{
        background-color: rgba(0, 82, 217, 1) !important;
        color: #FFFFFF !important;
    }
    .node .person .avat {
        cursor: pointer;
        padding: 13px 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        // min-height: 50px;
        width: 100%;
        height: 100%;
        margin: auto;
        word-break: break-all;
        background: #ffcc00;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 2px solid #0052D9;
        font-size: 18px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);

        .opreate_icon {
            display: none;
        }

        &:hover {
            .opreate_icon {
                display: block;
                position: absolute;
                top: -3px;
                right: -3px;
                padding: 5px;
            }
        }

        &.company {
            // background: #199ed8;
        }

        &.other {
            // background: rgba(231, 231, 231, 1);
        }
    }

    .node .person .avat img {
        cursor: pointer;
    }

    .node .person .name {
        height: 2em;
        line-height: 2em;
        overflow: hidden;
        width: 100%;
    }

    .node.hasMate::after {
        content: "";
        position: absolute;
        left: 2em;
        right: 2em;
        top: 15px;
        border-top: 2px solid rgba(231, 231, 231, 1);
        z-index: 1;
    }

    .node.hasMate .person:last-child {
        margin-left: 1em;
    }

    .el-dialog__header {
        padding: 0;
        padding-top: 30px;
        margin: 0 30px;
        border-bottom: 1px solid #F1F1F1;
        text-align: left;

        .el-dialog__title {
            font-size: 14px;
            font-weight: bold;
            color: #464C5B;
            line-height: 20px;
        }
    }

    .tips {
        padding: 0 20px;

        .el-select {
            width: 100%;
        }

        .blue {
            color: #00B5EF;
        }

        .check {
            margin-left: 100px;
        }

        .inquiry {
            font-weight: bold;
        }

        .el-form-item__label {
            display: block;
            float: none;
            text-align: left;
        }

        .el-form-item__content {
            margin-left: 0;
        }
    }

    .el-dialog__body {
        padding: 30px 25px;

        p {
            margin-bottom: 15px;
        }
    }

    .el-dialog__headerbtn {
        top: 30px;
        right: 30px;
    }

    // 竖向
    .landscape {
        transform: translate(-100%, 0) rotate(-90deg);
        transform-origin: 100% 0;

        .node {
            text-align: left;
            height: 8em;
            width: 8em;
        }

        .person {
            position: relative;
            transform: rotate(90deg);
            // padding-left: 4.5em;
            // height: 4em;
            top: 35px;
            left: 12px;
            width: 110px;
        }
    }

    // .el-popover {
    //     width: 112px !important;
    //     min-width: 0px !important;
    //     padding: 2px !important;

    //     .buttonClass {
    //         width: 100% !important;
    //         font-size: 12px;
    //         font-family: PingFang SC-Medium, PingFang SC;
    //         font-weight: 500;
    //         color: rgba(0, 0, 0, 0.6);
    //         height: 32px;
    //         background: rgba(255, 255, 255, 1);
    //         margin: 2px 0;
    //         line-height: 32px;
    //         padding-left: 12px;
    //         cursor: pointer;
    //         // padding: 8px !important;
    //         // margin-left: 5px !important;
    //         // float: left;
    //     }

    //     .buttonClass:hover {
    //         background: rgba(236, 242, 254, 1) !important;
    //         color: rgba(0, 82, 217, 1) !important;
    //     }
    // }

    .el-button+.el-button {
        margin: 2px 0;
    }
</style>